<script setup lang="ts" name="SystemArea">
import type { Column } from 'element-plus'
import ChinaArea from '@/plugins/chinaArea'
import AreaForm from './AreaForm.vue'
const chinaArea = new ChinaArea({ leave: 3, isall: false })
const chinaAreaOptions = ref(chinaArea.chinaData())
console.log(chinaAreaOptions.value)
const { t } = useI18n() // 国际化
// console.log(chinaData)
// 表格的 column 字段
const columns: Column[] = [
  {
    dataKey: 'value', // 需要渲染当前列的数据字段。例如说：{id:9527, name:'Mike'}，则填 id
    title: t('common', 'code'), // 显示在单元格表头的文本
    width: 400, // 当前列的宽度，必须设置
    fixed: true, // 是否固定列
    key: 'value' // 树形展开对应的 key
  },
  {
    dataKey: 'label',
    title: t('sys.area', 'name'),
    width: 200,
    key: 'label'
  }
]


/** 添加/修改操作 */
const formRef = ref()
const openForm = () => {
  formRef.value.open()
}
</script>

<template>
  <PageCard>
    <ContentFormTable>
      <template #header>
        <CButton type="primary" plain :onClick="openForm" preIcon="ri:export-line" :title="t('sys.area', 'search')" />
      </template>
      <template #content>
        <el-auto-resizer>
          <template #default="{ height, width }">
            <el-table-v2 :columns="columns" :data="chinaAreaOptions" :width="width" :height="height" row-key="value" expand-column-key="value" />
          </template>
        </el-auto-resizer>
      </template>
    </ContentFormTable>
    <!-- 表单弹窗：添加/修改 -->
    <AreaForm ref="formRef" />
  </PageCard>
</template>

<style scoped lang="scss">
.el-auto-resizer {
  border: 1px solid var(--el-border-color-lighter);
  border-left: none;
}

.table-layout {
  position: relative;
  margin: 0;

  .table-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    .el-table {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
